<template>
	<div class="test_box animated fadeInUp">
		<div class="test_title">
			<li>
				<p>{{ dataList.test_title }}</p>
			</li>
			<li>
				<button @click="goback">返回</button>
			</li>
		</div>
		<div class="test_list">

			<div class="test_list_title">
				<div class="stem" v-if="dataList.current[0].reason">
					<p>{{dataList.current[0].reason}}</p>
				</div>
				<div v-for="(ite,idx) in dataList.current">
					<p>{{ dataList.taskAllIdx+ite.isidx }}、{{ ite.question }}</p>
					<li v-if="ite.type == 'multiple'">
						<el-checkbox-group :value="ite.choose_answer" :name="ite.exam_id">
							<el-checkbox :label="item.id"
								v-for="(item, index) in ite.option">{{item.id}}{{item.name == '.'?'':'：'+item.name}}</el-checkbox>
						</el-checkbox-group>
					</li>
					<li v-if="ite.type !== 'multiple'">
						<el-radio-group v-model="ite.exam_id">
							<el-radio @click.prevent="getRadio(item.id,ite.isidx,ite.type,idx,index)" :label="item.id"
								size="large"
								v-for="(item, index) in ite.option">{{ item.id }}{{item.name == '.'?'':'：'+item.name}}</el-radio>
						</el-radio-group>

					</li>

				</div>
			</div>
<!-- 			<button class="cardBtn" @click="openCardBox">
				答题卡
			</button>
			<div>
				<div class="stage" :class="{ isopen: openCard }">
					<p :class="{stage_select:dataList.stageId == idx}" v-for="(val,idx) in dataList.jdList.list"
						@click="selectStage(val.id,idx)">{{val.title}}</p>
				</div>
				<div class="test_list_option" :class="{ isopen: openCard }">
					<span v-for="(item, index) in dataList.submitAll[dataList.stageId]" :class="{linked:item.status}">

						<span v-if="item.type == 'multiple'" :class="{
						     isover: item.choose_answer.length !== 0,
						    iscurrent: dataList.idxId == item.idxId,
							linked:item.status
						}" @click="selectTopic(item.isidx,item.idxId)">
							{{ item.isidx}}
						</span>
						<span v-if="item.type == 'single'" :class="{
				        isover: item.choose_answer &&item.choose_answer !== '0',
				        iscurrent: dataList.idxId == item.idxId,
						linked:item.status,
						biaoyibtn:item.biaoyi
				    }" @click="selectTopic(item.isidx,item.idxId)">
							{{ item.isidx}}
						</span>

					</span>

				</div>
			</div> -->

		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onBeforeUnmount,
		onBeforeMount
	} from 'vue'
	import util from '@/utils/util.js'
	import axios from "axios";
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const openCard = ref(false)
	const examResultsId = ref(null)
	const dataList = reactive({
		taskAllIdx: 0,
		current: [], //当前题目
		currentAll: [
			[],
			[],
			[],
			[],
			[]
		], //全部题目
		submitAll: [
			[],
			[],
			[],
			[],
			[]
		],
		idx: 1, //当前第几题
		idxId: 0,
		radioId: '0',
		test_title: '',
		// jdList: [],
		stageId: 0,
	})
	onBeforeMount(() => {
		// dataList.jdList = JSON.parse(router.currentRoute.value.query.list)
		dataList.test_title = router.currentRoute.value.query.title
		examResultsId.value = router.currentRoute.value.query.id
		// ExamDetail(dataList.jdList.list[0].id, 0)
		// ExamDetail(dataList.jdList.list[1].id, 1)
		// ExamDetail(dataList.jdList.list[2].id, 2)
		// dataList.current = dataList.currentAll[0][0]
	})
	const selectTopic = (idx, idxId) => {
		// console.log(idx, dataList.submitAll[dataList.stageId].length)


		if (idx > dataList.submitAll[dataList.stageId].length || idx < 0) {
			console.log("11111")
		} else {
			dataList.idx = idx
			dataList.idxId = idxId
			dataList.current = dataList.currentAll[dataList.stageId][idxId]
		}

	}
	const getRadio = (val, idx, type, index, e) => {
		var sss = dataList.current[0].idxId
		dataList.radioId = val
		dataList.submitAll[dataList.stageId][idx - 1].choose_answer = val
		dataList.currentAll[dataList.stageId][sss][index].exam_id = val
		var isover = 0
		dataList.current.forEach(val => {
			if (!val.choose_answer) {
				isover += 1
			}
		})
		if (isover == 0) {
			selectTopics('next')
		}
	}
	const goback = () => {
		router.back()
	}

	const openCardBox = () => {
		openCard.value = !openCard.value
	}

	// 切换阶段
	const selectStage = (id, idx) => {
		if (idx < dataList.stageId) {
			ElMessage({
				type: 'error',
				message: '该阶段已答过，不可修改！',
			})
		} else {

			ElMessageBox.confirm(
					'请确认该阶段已完成答题，是否确定切换阶段？', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					if (idx == 1) {
						dataList.taskAllIdx += dataList.submitAll[idx - 1].length
					} else if (idx == 2) {
						dataList.taskAllIdx = 0
						dataList.taskAllIdx += dataList.submitAll[idx - 1].length + dataList.submitAll[idx - 2]
							.length
					}
					dataList.idx = 1
					dataList.idxId = 0
					dataList.radioId = 0
					dataList.stageId = idx
					ExamDetail(id, idx)

				})
				.catch(() => {

				})

		}


	}
	const ExamDetail = (id, index) => {
		axios({
			url: '/Exam/answer_detail',
			baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
			method: 'post',
			data: {
				exam_cat_id: id
			}
		}).then(res => {
			var list =res.data.list
			var subList = []
			var isidx = 1
			list.forEach((val, i) => {
				if (val.length > 1) {
					val.forEach((item, idx) => {
						item.idxId = i
						item.isidx = isidx
						item.allLength = val.length
						item.status = true
						isidx += 1
						subList.push(item)

					})
				} else {
					val[0].idxId = i
					val[0].status = false
					val[0].isidx = isidx
					val[0].allLength = val.length
					isidx += 1
					subList.push(val[0])
				}

			})
			console.log(subList, "2222")
			if (dataList.currentAll[index].length == 0) {
				dataList.currentAll[index] = list //全部选项
			}
			if (dataList.submitAll[index].length == 0) {
				dataList.submitAll[index] = subList //全部选项
			}
			dataList.current = dataList.currentAll[dataList.stageId][0]
		})
	}
</script>

<style lang="scss" scoped>
	.biaoyi {
		background-color: #FF5151;
		color: #FFFFFF;
		border: none;
		padding: 3px 10px;
		border-radius: 10px;
	}

	@media screen and (min-width:1200px) {
		.stage {

			// opacity: 0;
			p {
				width: fit-content;
				background-color: #EFEFEF;
				border-radius: 10px;
				font-size: 16px;
				color: #666666;
				padding: 10px 20px;
				cursor: pointer;
				margin-bottom: 20px;
			}

			.stage_select {
				background-color: #1CABD9;
				color: #FFFFFF;
			}
		}

		.test_box {
			width: 1000px;
			margin: 0 auto;
			min-height: 500px;
			position: relative;

			.after {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 48px;
				height: 104px;
				background: #D9D9D9;
				position: absolute;
				top: 350px;
				cursor: pointer;

				img {
					width: 11px;
					height: 30px;
				}
			}

			.right-icon {
				right: -48px;
			}

			.left-icon {
				left: -48px;
			}

			.test_title {
				background: #1CABD9;
				display: flex;
				justify-content: space-between;
				width: 1000px;
				height: 77px;
				margin-top: 40px;

				li {
					display: flex;
					align-items: center;
					padding: 25px;

					p {
						font-size: 20px;
						font-weight: 600;
						color: #FFFFFF;
					}

					img {
						margin-right: 15px;
						width: 29px;
						height: 29px;
					}

					span {
						font-size: 22px;
						font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
						font-weight: 600;
						color: #FFFFFF;
					}

					button {
						width: 112px;
						height: 37px;
						background: #FFFFFF;
						border-radius: 37px;
						font-weight: 400;
						border: none;
						color: #1CABD9;
						margin-left: 40px;
					}

					button:last-child {
						background: #FFFFFF;
						color: #333333;
					}
				}
			}

			.test_list {
				width: 1000px;
				min-height: 800px;
				background: #F3FCFF;
				border-radius: 10px 10px 10px 10px;
				padding: 30px;
				display: flex;
				justify-content: space-between;

				.cardBtn {
					display: none;
					background-color: #1CABD9;
				}

				.test_list_title {
					.stem {
						width: 470px;
						padding: 15px;
						background: rgba(28, 171, 217, 0.2);
						border-radius: 10px;
						border: 1px solid #1CABD9;
						margin-bottom: 30px;

						p {
							margin-bottom: 0;
							max-width: 500px;
							font-size: 18px;
							color: #333333;
						}
					}

					p {
						margin-bottom: 15px;
						max-width: 500px;
						font-size: 18px;
						font-weight: 400;
						color: #333333;
					}

					// checkbox
					:deep(.el-radio__input),
					:deep(.el-checkbox__input) {
						margin-top: 2px;
					}

					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						max-width: 500px;
						color: #1CABD9;
						white-space: break-spaces;
					}

					:deep(.is-checked) {
						.el-radio__inner {
							border-color: #1CABD9;
						}

						.el-radio__label,
						.el-checkbox__label {
							color: #1CABD9;
						}

					}

					:deep(.el-radio) {
						display: flex;
						align-items: flex-start;
						height: auto;
						margin-bottom: 20px;
					}
				}

				.test_list_option {
					display: flex;
					flex-wrap: wrap;
					width: 361px;
					height: fit-content;
					// border-top: 1px solid #C6C6C6;
					border-left: 1px solid #C6C6C6;

					span {
						width: 36px;
						height: 36px;
						line-height: 36px;
						cursor: pointer;
						border-top: 1px solid #C6C6C6;
						border-right: 1px solid #C6C6C6;
						border-bottom: 1px solid #C6C6C6;
						text-align: center;

						span {
							width: 100%;
							height: 100%;
							display: block;
							border: 0 !important;
						}
					}

					.isover {
						background-color: #1CABD9;
						color: #FFFFFF;
					}

					.iscurrent {
						background-color: #FF9933 !important;
						color: #FFFFFF;
					}

					.biaoyibtn {
						background-color: #FF5151;
						color: #FFFFFF;
					}

					.linked {
						border-right: none;
					}

					span:last-child {
						border-right: 1px solid #C6C6C6;
					}

					// span:nth-child(-n + 10){
					// 	border-bottom: none;
					// }
				}

				.el-radio-group,
				.el-checkbox-group {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}

	@media screen and (max-width: 1200px) {
		.stage {
			opacity: 0;
			display: flex;

			p {
				width: fit-content;
				background-color: #EFEFEF;
				border-radius: 1.5vw;
				font-size: 2.1vw;
				color: #666666;
				padding: 1.5vw 2.5vw;
				cursor: pointer;
				margin-bottom: 3vw;
				margin-right: 3vw;
			}

			.stage_select {
				background-color: #1CABD9;
				color: #FFFFFF;
			}
		}

		.test_box {
			width: 95vw;
			margin: 0 auto;
			min-height: 61vh;
			position: relative;

			.after {
				z-index: 9999;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 12vw;
				height: 6vw;
				background: #D9D9D9;
				position: absolute;
				bottom: 2vw;
				cursor: pointer;

				img {
					width: 1.4vw;
					height: 4vw;
				}
			}

			.right-icon {
				right: 6.4vw;
			}

			.left-icon {
				left: 6.4vw;
			}

			.test_title {
				background: #1CABD9;
				display: flex;
				justify-content: space-between;
				width: 95vw;
				// height: 77px;
				margin-top: 40px;

				li {
					display: flex;
					align-items: center;
					padding: 3vw;

					p {
						font-size: 2.66vw;
						font-weight: 600;
						color: #FFFFFF;
					}

					img {
						margin-right: 2vw;
						width: 4vw;
						height: 4vw;
					}

					span {
						font-size: 2.9vw;
						font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
						font-weight: 600;
						color: #FFFFFF;
					}

					button {
						width: 14.9vw;
						height: 4.9vw;
						font-size: 2.1vw;
						background: #FFFFFF;
						border-radius: 4.6vw;
						font-weight: 400;
						border: none;
						color: #1CABD9;
						margin-left: 3vw;
					}

					button:last-child {
						background: #FFFFFF;
						color: #333333;
					}
				}
			}

			.test_list {
				// width: 95vw;
				min-height: 20vh;
				background: #F3FCFF;
				border-radius: 1.2vw;
				padding: 4vw 4vw 12vw 4vw;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				position: relative;

				.cardBtn {
					width: 20vw;
					padding: 1vw 2vw;
					background-color: #1CABD9;
					color: #FFFFFF;
					border: none;
					border-radius: 5vw;
					margin: 3vw 0;
				}

				.test_list_title {
					p {
						margin-bottom: 2vw;
						max-width: 95vw;
						font-size: 2.4vw;
						font-weight: 400;
						color: #333333;
					}

					// checkbox
					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						font-size: 2.4vw !important;
					}

					:deep(.is-checked) {
						.el-radio__inner {
							background: #1CABD9;
							border-color: #1CABD9;
						}

						.el-radio__label,
						.el-checkbox__label {
							color: #1CABD9;

						}
					}

					:deep(.el-radio) {
						display: flex;
						align-items: flex-start;
						height: auto;
						margin-bottom: 2vw;
					}

					:deep(.el-radio__input) {
						margin-top: 2px;
					}

					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						max-width: 95vw;
						color: #1CABD9;
						white-space: break-spaces;
					}
				}

				.test_list_option {
					display: flex;
					flex-wrap: wrap;
					border-left: 1px solid #C6C6C6;
					margin: 0 auto;
					transition: all 0.5s;
					overflow: hidden;
					opacity: 0;

					span {
						min-width: 7vw;

						cursor: pointer;
						border-right: 1px solid #C6C6C6;
						border-bottom: 1px solid #C6C6C6;
						border-top: 1px solid #C6C6C6;
						text-align: center;
						font-size: 1.8vw;

						span {
							width: 100%;
							height: 100%;
							display: block;
							border: 0 !important;
							padding: 1.5vw 1vw;
						}
					}
					.isover {
						background-color: #1CABD9;
						color: #FFFFFF;
					}

					.iscurrent {
						background-color: #FF9933;
						color: #FFFFFF;
					}

					.linked {
						border-right: none;
					}

					span:last-child {
						border-right: 1px solid #C6C6C6;
					}
				}

				.isopen {
					opacity: 1;
				}

				.el-radio-group,
				.el-checkbox-group {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}
</style>